<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>1</title>
    <script src="http://www.itxst.com/package/jquery-3.3.1/jquery.js"></script>
    <link href="http://www.itxst.com/package/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
    <link href="http://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.css" rel="stylesheet" />
    <script src="http://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>
<body>
<script src="./js/jquery.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.js"></script>

<table
        id="table"
        class="table-hover"
        data-search="true">
</table>

<script>
    const token = document.cookie;
    const columns = [

        {
            field: "id",
            title: 'ID'
        },
        {
            field: 'title',
            title: '书名'
        },
        {
            field: 'author',
            title: '作者'
        },
        {
            field: 'publishingHouse',
            title: '出版社'
        },
        {
            field: 'location',
            title: '位置'
        },
        {
            field: 'description',
            title: '简介'
        }
    ];
    $.ajax({
        url: "http://47.100.90.111:9090/book/getBooks", //请求url
        async: false,//有返回值才继续后面js
        type: "GET", //方式
        headers: {
            'Accept': '*/*',
            "token": token,
        },
        dataType: "json",
        success: function (data) { //请求成功则执行
            $("#table").bootstrapTable({
                toolbar:"#toolbar",
                data: data.data,
              /*  striped: true,                      //是否显示行间隔色
                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）*/
                columns: columns,
            });
            console.log(data.data);
        },
        error: function () { //非必须，请求失败返回
            console.log('Request Error.');
        }

    });
</script>
</body>
</html>
<!--
后台返回数据的时候,如果前端用了分页属性,后台得返回这样的数据格式:
{ "total": 42, "rows": [ { "id": 1, "name": "张三", "age": 18, "address": "北京" },
{ "id": 2, "name": "张三", "age": 18, "address": "北京" }...]-->
